<template>
  <div class="myContainer">
    <el-tabs type="border-card">
      <el-tab-pane label="工单基础信息">
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单基本信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单ID :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单ID" :readonly="disabled" v-model="id"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            当前状态 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="当前状态" :readonly="disabled" v-model="affair_status"></el-input>
          </el-col>         
          <el-col :span="3" class="myLeftMsg">
            是否逾期 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="是否逾期" :readonly="disabled" v-model="istimeout"></el-input>
          </el-col>
        </el-row>
        
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            所属小区 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="所属小区" v-model="areaid" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单来源 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单来源" :readonly="disabled" v-model="commit_type"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            创建人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="创建人" :readonly="disabled" v-model="commit_user_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            上报时间 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="上报时间" :readonly="disabled" v-model="commit_time"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理等级 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="处理等级" v-model="level" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理意见 :
          </el-col>
          <el-col :span="15">
            <el-input placeholder="处理意见" type="textarea"  v-model="affnote" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单相关人员信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            上报人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="上报人" :readonly="disabled" v-model="commit_user_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            上报人类型 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="上报人类型" :readonly="disabled" v-model="commit_user_type"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="commit_user_tel"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系地址 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系地址" :readonly="disabled" v-model="affair_addr"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="责任人" :readonly="disabled" v-model="charge_user_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="charge_user_tel"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            当前处理人 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="当前处理人" :readonly="disabled" v-model="deal_user_name"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            获取方式 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="获取方式" :readonly="disabled" v-model="affair_subtype"></el-input>
          </el-col>
        </el-row>
         <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            联系电话 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="联系电话" :readonly="disabled" v-model="dealuser_phone"></el-input>
          </el-col>
        </el-row>
        
        <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">工单事件信息</el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单类型 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="工单类型" :readonly="disabled" v-model="affair_type_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            类别 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="类别" :readonly="disabled" v-model="affair_subtype_name"></el-input>
          </el-col>
        </el-row>
         <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            语音描述 :
          </el-col>
          <el-col :span="6">
             <audio controls>
                 <source v-for="x in affair_attachments" v-if="x.source_type==6" :src='x.url' type="audio/mpeg">
             	</audio>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            问题描述 :
          </el-col>
          <el-col :span="15">
            <el-input type="textarea" placeholder="问题描述" v-model="note" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            图片信息 :
          </el-col>
          <el-col :span="15">
              <img v-for="x in affair_attachments" v-if="x.source_type==1" :src=x.url alt="图片丢失" width="300" style="margin-right: 10px" />
          </el-col>
        </el-row>
        
          <el-row class="myBorderBottom">
          <el-col :span="3" class="myTitleText myLineHeight_40px">评价/回访信息</el-col>
        </el-row>
        <!-- <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            回访渠道 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="回访渠道" :readonly="disabled" v-model="user_checked"></el-input>
          </el-col>
        </el-row> -->
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价等级 :
          </el-col>
          <el-col :span="6">
            <el-input placeholder="评价等级" :readonly="disabled" v-model="pjdj"></el-input>
          </el-col>
        </el-row>
         <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价/回访信息 :
          </el-col>
          <el-col :span="6">
             <audio controls>
                 <source v-for="x in pjyy" :src="x.url" type="audio/mpeg">
             	</audio>
          </el-col>
        </el-row>
        <el-row class="myPaddingTop_10px">
          <el-col :span="3" class="myLeftMsg">
            评价/回访信息 :
          </el-col>
          <el-col :span="15">
            <el-input type="textarea" placeholder="评价/回访信息" v-model="yhpj" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
              
        <el-row class="myPaddingTop_10px">
          <el-col :span="15" :offset="3">
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
        
        
      </el-tab-pane>

      
      <el-tab-pane label="工单跟踪">
       
      <el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%"
          >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="time_stamp"
            label="时间"
            width="160"
            >
          </el-table-column>
                                  
            <el-table-column
            prop="action_type_name"
            width="130"
            label="事件名称"
            >             
          </el-table-column>
           
          <el-table-column
            prop="user_name"
            width="130"
            label="人员"
            >            
          </el-table-column>
          
          <el-table-column
            prop="message"
            label="事件信息"
            >            
          </el-table-column>
         
          <el-table-column
            width="220"
            label="图片"
            >   
            <template scope="scope">            
              <img v-for="x in scope.row.attachment_list" v-if="x.source_type==1" :src=x.url width="50" height="50" style="margin-right: 10px" />
            </template>
            
          </el-table-column>                 
         
          <el-table-column
            width="310"
            label="音频"
            >   
            <template scope="scope">  
                <audio controls v-for="x in scope.row.attachment_list" v-if="x.source_type==6" :src=x.url type="audio/mpeg"></audio>           
            </template>
            
          </el-table-column>      
         
        </el-table>       
      </el-col>
    </el-row>
    <el-row class="myPaddingTop_10px">
          <el-col :span="15">
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
     </el-tab-pane>
     
      <el-tab-pane label="通话记录">
       
      <el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list_2"
          :border = true
          :stripe = true
          style="width: 100%"
          >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="时间"
            >
          </el-table-column>
                                  
            <el-table-column
            prop="affair_id"
            label="通话坐席"
            >             
          </el-table-column>
           
          <el-table-column
            prop="affair_type"
            label="呼入/呼出方向"
            >   
             <template scope="scope">
              <span v-if="scope.row.affair_type==0">呼出</span>
              <span class="myColorRed" v-else>呼入</span>
            </template>
          </el-table-column>
                          
             <el-table-column
            prop="url"
            
            label="通话录音"
            >   
            <template scope="scope">              
               	<audio controls>
                 <source :src='scope.row.url' type="audio/mpeg">
               	</audio>            
            </template>
            
          </el-table-column>      
         
        </el-table>       
      </el-col>
    </el-row>
    <el-row class="myPaddingTop_10px">
          <el-col :span="15">
            <el-button type="primary" class="myBgGreen" @click="onClose">关 闭</el-button>
          </el-col>
        </el-row>
     </el-tab-pane>  
     
    </el-tabs>


    <!--指派执行人员弹出框 start-->
    <!--<el-dialog title="指派执行人员" class="myRoleDialog" :visible.sync="newExecutorDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        <el-tree
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newExecutorDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen">提 交</el-button>
      </div>
    </el-dialog>-->
    <!--指派执行人员弹出框 end-->

    <!--重新处理弹出框 start-->
    <!--<el-dialog title="警告" class="myRoleDialog" :visible.sync="againDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        是否将工单号为 {{id}} 的 {{type_name}} 发回重新处理！！！
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="againDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onReDo">确 定</el-button>
      </div>
    </el-dialog>-->
    <!--重新处理弹出框 end-->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }    
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  /*.myLineHeight_40px{
    line-height: 40px;
  }*/
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
  }
  .mymarginTop_10px{
    padding-top: 10px;
  }
  .myLineHeight_45px{
    line-height: 45px;
  }
  .tp{
  	width: 50px;
  	height: 50px;
  }
</style>
  
<script>
  import { affairStatus , istimeout ,  level  , evaluateType , redo } from '@/api/affair_setting';
  import { getRepairDetail , sourceOfEvents , dispatchType , Print , popType} from '@/api/entrance_guard';
  export default {
     data(){
      return{
        disabled:true,
        rankValue:"",
        rankOptions:[],
        list:[],
        list_1:[],
        list_2:[],
        date1:"",
        newExecutorDialogVisible:false,
        radio:"",
        dialogImageUrl: '',
        dialogVisible: false,
        score:0,
        againDialogVisible:false,
        id:"",
        affair_status:"",
        areaid:"",
        istimeout:"",
        pjyy:[],
        commit_type:"",
        commit_time:"",
        commit_user_name:"",
        commit_user_tel:"",
        affair_addr:"",
        charge_user_name:"",
        affair_type_name:"",
        affair_subtype_name:"",
        note:"",
        affair_attachments:[],
        chargeuser_id:"",
        complete_time:"",
        dispatch_time:"",
        level:"",
        endtime:"",
        affnote:"",
        dispatch_type:"",
        deal_user_name:"",
        dealuser_phone:"",
        isdealed:"",
        user_review:"",
        deal_suggestion:"",
        deal_result:"",
        deal_attachments:[],
        type_name:"",
        timestamp:"",
        user_evaluation:"",
        isEvaluate:"",
        charge_user_tel:"",
        commit_user_type:"",
        reviewTimestamp:"",
        review_note:"",
        affair_subtype:"",
        user_checked:"",
        yhpj:"",
        pjdj:"",        
        affair_status_num:""
      }
    },
    components: {
    },
    mounted(){
      document.title = '报修工单详情';
      this.id = this.$route.query.id;
      this.onGetRepairDetail();
    },
    methods:{
    	    	
      onGetRepairDetail(){//通过报修id拉取报修详情
        let vm=this;
        getRepairDetail(vm.id).then(response =>{
          let res=response.data;
          vm.list=res.timeline_objects;
          vm.list_2=res.tel_records;
          vm.list_1=res.timeline_objects[0].attachment_list;
          vm.affair_status_num=res.affair_status;
          vm.affair_status=affairStatus[res.affair_status];//事务状态
          vm.areaid=res.area_name;//小区id
          vm.istimeout=istimeout[res.istimeout];//是否逾期
          vm.commit_type=sourceOfEvents[res.commit_type];//工单来源
          vm.commit_time=res.commit_time;//上报时间
          vm.commit_user_name=res.commit_user_name;//上报人
          vm.commit_user_tel=res.commit_user_tel;//上报人电话
          vm.affair_addr=res.affair_addr;//上报人地址
          vm.charge_user_name=res.charge_user_name;//责任人
          vm.affair_type_name=res.affair_type_name;//报修类别
          vm.affair_subtype_name=res.affair_subtype_name;
          vm.note=res.note;//描述
          vm.affair_attachments=res.affair_attachments;//图片信息（基本信息）
          vm.chargeuser_id=res.affair_dispatch.chargeuser_id;//预处理人
          vm.complete_time=res.affair_dispatch.complete_time;//操作时间
          vm.level=level[res.affair_dispatch.level];//处理等级
          vm.endtime=res.affair_dispatch.endtime;//处理截止时间
          vm.affnote=res.affair_dispatch.deal_suggestion;//处理意见
          vm.affair_subtype=dispatchType[res.affair_dispatch.dispatch_type];//派遣方式
          vm.dispatch_time=res.affair_dispatch.dispatch_time;//工单获取时间
          vm.deal_user_name=res.deal_user_name;//执行人
          vm.dealuser_phone=res.deal_user_tel;//执行人电话
          vm.isdealed=res.affair_dispatch.isdealed;//处理结论
          vm.deal_suggestion=res.affair_dispatch.deal_suggestion;//处理意见
          vm.deal_result=res.affair_dispatch.deal_result;//问题描述
          vm.deal_attachments=res.deal_attachments;
          vm.type_name=res.type_name;
          vm.charge_user_tel=res.charge_user_tel;//责任人电话
          vm.commit_user_type=vm.onpopType(res.commit_type);//上报人类型
          vm.user_review=res.user_review;
          vm.user_evaluation=res.user_evaluation;
          vm.user_checked=res.user_checked;
          vm.pjyy=res.evaluation_attachments;
          vm.yhpj=res.user_evaluation.user_evaluation;
          vm.pjdj=vm.user_evaluation_score(res.user_evaluation.score);
        }).catch(error =>{
          //console.log("拉取报修详细失败",error)
        })
      },
      handleRemove(file, fileList) {
        //console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      onClose(){
        let vm=this;
        // let params={
        //   time:vm.$route.query.time||[],
        //   keyword:vm.$route.query.keyword||'',
        //   page_num:vm.$route.query.page_num||1,
        //   status:vm.$route.query.status||'',
        //   areaid:vm.$route.query.areaid||''
        // }
        // window.localStorage.setItem('backData',JSON.stringify(params));
        vm.$router.go(-1);
      },
      Evaluate:function(val){
        return evaluateType[val];
      },
      onpopType(val){
        return popType[val];
      },
      onReDo(){
        let vm=this;
        let params={
          type:1,
          affair_id:vm.id
        }
        redo(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onGetRepairDetail();
          vm.againDialogVisible=false;
          //console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！")
          //console.log(error)
        })
      },
      user_evaluation_score(val){
        let type={
          1:"差评",
          2:"差评",
          3:"中评",
          4:"好评",
          5:"好评",
        }
        return type[val];
      }
    }

  }

</script>  



